//财务管理
import './Finance.css'
import http from '../../utils/http';
import { useState , useEffect , useRef} from 'react';
import { IconExclamationCircle } from '@arco-design/web-react/icon'
import { Form , DatePicker , Select , Button , Table , Pagination } from '@arco-design/web-react';
const { RangePicker } = DatePicker;


//下拉选项
const Option = Select.Option;
const option1 = ['商户AAA', '商户BBB', '商户CCC'];
const option2 = ['子商户a', '子商户b', '子商户c'];

//表单
const columns = [
  {
    title: '序号',
    render:  (_,record)=> {
      for(let i=0;i<_allDate.length;i++){
        if(_allDate[i].accountId===record.accountId){
          return <span>{i+1}</span>
        }
      }
    }
  },
  {
    title: '交易时间',
    dataIndex: 'transactionTime',
  },
  {
    title: '商户名称',
    dataIndex: 'merchantName',
  },
  {
    title: '子商户名称',
    dataIndex: 'childMerchantName',
  },
  {
    title: '收入',
    dataIndex: 'income',
    render: (_,record) => (<span>+{record.income}</span>),
  },
  {
    title: '退款',
    dataIndex: 'refund',
    render: (_,record) => (<span>-{record.refund}</span>),
  },
  {
    title: '分账',
    dataIndex: 'subLedger',
    render: (_,record) => (<span>-{record.subLedger}</span>),
  },
  {
    title: '手续费',
    dataIndex: 'serviceCharge',
    render: (_,record) => (<span>-{record.serviceCharge}</span>),
  },
  {
    title: '期初余额',
    dataIndex: 'openingBalance',
  },
  {
    title: '期末余额',
    dataIndex: 'closingBalance',
  }
];
// const allData = [
//   {
//     accountId:1,
//     transactionTime: '2019-12-01',
//     merchantName: '商户BBB',
//     childMerchantName: '子商户a',
//     income:1228,
//     refund:283,
//     subLedger:418,
//     serviceCharge:12,
//     openingBalance:2556,
//     closingBalance:3335,
//   },
//   {
//     accountId:2,
//     transactionTime: '2019-12-01',
//     merchantName: '商户AAA',
//     childMerchantName: '子商户a',
//     income:1228,
//     refund:283,
//     subLedger:418,
//     serviceCharge:12,
//     openingBalance:2556,
//     closingBalance:3335,
//   },
//   {
//     accountId:3,
//     transactionTime: '2019-12-01',
//     merchantName: '商户CCC',
//     childMerchantName: '子商户b',
//     income:1228,
//     refund:283,
//     subLedger:418,
//     serviceCharge:12,
//     openingBalance:2556,
//     closingBalance:3335,
//   },
//   {
//     accountId:4,
//     transactionTime: '2019-12-01',
//     merchantName: '商户CCC',
//     childMerchantName: '子商户a',
//     income:1228,
//     refund:283,
//     subLedger:418,
//     serviceCharge:12,
//     openingBalance:2556,
//     closingBalance:3335,
//   },
//   {
//     accountId:5,
//     transactionTime: '2019-12-01',
//     merchantName: '商户AAA',
//     childMerchantName: '子商户a',
//     income:1228,
//     refund:283,
//     subLedger:418,
//     serviceCharge:12,
//     openingBalance:2556,
//     closingBalance:3335,
//   },
//   {
//     accountId:6,
//     transactionTime: '2019-12-01',
//     merchantName: '商户BBB',
//     childMerchantName: '子商户a',
//     income:1228,
//     refund:283,
//     subLedger:418,
//     serviceCharge:12,
//     openingBalance:2556,
//     closingBalance:3335,
//   },
//   {
//     accountId:7,
//     transactionTime: '2019-12-01',
//     merchantName: '商户BBB',
//     childMerchantName: '子商户a',
//     income:1228,
//     refund:283,
//     subLedger:418,
//     serviceCharge:12,
//     openingBalance:2556,
//     closingBalance:3335,
//   },
//   {
//     accountId:8,
//     transactionTime: '2019-12-01',
//     merchantName: '商户AAA',
//     childMerchantName: '子商户b',
//     income:1228,
//     refund:283,
//     subLedger:418,
//     serviceCharge:12,
//     openingBalance:2556,
//     closingBalance:3335,
//   },
//   {
//     accountId:9,
//     transactionTime: '2019-12-01',
//     merchantName: '商户AAA',
//     childMerchantName: '子商户b',
//     income:1228,
//     refund:283,
//     subLedger:418,
//     serviceCharge:12,
//     openingBalance:2556,
//     closingBalance:3335,
//   }
// ];
 
var allData=[]
var _allDate=allData
var pageArr=[5,10,20]
var nowPage=1
var sizePage=5
var selV={}
var randomNum=366

const Finance = () => {
  useEffect(()=>{
    console.log('useEfect触发');
    link()
  },[])
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const formRef = useRef();

  const link = () => {
      http({
        url: '/accountSelectAll',
        method: 'get'
      }).then((res) => {
        console.log(res.result.data);
        succLink(res.result.data)
      })
      // setData(_allDate.slice((nowPage-1)*sizePage,sizePage*nowPage))
  }
  const succLink=(v)=>{
    allData=time2(v)
    _allDate=allData
    setData(_allDate.slice((nowPage-1)*sizePage,sizePage*nowPage))
  }
  //修改页码触发
  function onPage(pageNumber, pageSize){
    nowPage=pageNumber
    sizePage=pageSize
    load()
  }
  //表达模拟加载
  function load(){
    setData(_allDate)
    setLoading(true);
    random()
    setTimeout(() => {
      setData(_allDate.slice((nowPage - 1) * sizePage, nowPage * sizePage));
      setLoading(false);
      nowPage=1
    }, 200);
  }
  //查询
  function query(){
    _allDate=allData
    if(selV.option1){
      _allDate=_allDate.filter((v)=>{
        return v.merchantName===selV.option1
      })
    } 
    if(selV.option2){
      _allDate=_allDate.filter((v)=>{
        return v.childMerchantName===selV.option2
      })
    }
    if(selV.time){
      _allDate=_allDate.filter((v)=>{
        return v.transactionTime>=selV.time[0]&&v.transactionTime<=selV.time[1]
      })
    } 
    onPage(1,sizePage)
  }
  //重置
  function reset(){
    _allDate=allData
    onPage(1,sizePage)
    formRef.current.resetFields();
  }
  //搜索框内改变值时触发
  const onValuesChange = (changeValue, values) => {
    selV=values
  };
  //时间转换
  function time2(v){
    for(let i=0;i<v.length;i++){
      v[i].transactionTime=v[i].transactionTime.slice(0,10)
    }
    return v
  }
  // 加载时间随机值800-300
  function random(){
    randomNum = parseInt(Math.random() * 500 + 300)
  }  


  return (
    <div className='bigBox'>
      <div className='title'>
        <div>
          <span>财务管理</span>
          <span>  /  </span>
          <span className='bold'>账目汇总</span>
        </div>
        <h2>账目汇总</h2>
      </div>
      <div className='content'>
        <div className='header_opt'>
        <Form ref={formRef} onValuesChange={onValuesChange}>
            <div> {/* 时间选择 */}
              <Form.Item label='起止日期：' field='time'>
                <RangePicker
                  mode='date'
                  style={{ marginBottom: 24 }}
                />
              </Form.Item>
            </div>
            <div> {/* 下拉选择1 */}
              <Form.Item label='商户名称：' field='option1'>
                <Select placeholder='请选择'>
                  {option1.map((option, index) => (
                    <Option key={option} value={option}>
                      {option}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            </div>
            <div> {/* 下拉选择2 */}
            <Form.Item label='子商户名称：' field='option2'>
                <Select placeholder='请选择'>
                  {option2.map((option, index) => (
                    <Option key={option} value={option}>
                      {option}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            </div>
          </Form>
        </div>
        <div className='header_btn'>
          <Button type='primary' onClick={query}>查询</Button>
          <Button type='secondary' onClick={reset}>重置</Button>
        </div>
        <div className='selectItem'>
          <p><span><IconExclamationCircle /></span>已选择<span>{_allDate.length}</span>项   本次查询耗时：{randomNum} 毫秒   <span>清空</span></p>
        </div>
        <div className='table'>
          <Table columns={columns} data={data} loading={loading} pagination={false} rowKey='accountId'/>
          <Pagination
            showTotal
            total={_allDate.length}
            showJumper
            sizeCanChange
            pageSize={sizePage}
            sizeOptions={pageArr}
            onChange={onPage}
            style={{ width: 800, marginBottom: 20 }}
          />
        </div>
      </div>
    </div>
  )
}
export default Finance

